<template>
  <div class="brand-management">
    <!-- 左侧搜索和分类区 -->
    <div class="left-side">
      <div class="search-box">
        <el-input
          placeholder="请输入品牌编码、名称"
          clearable
        />
      </div>
      <div class="category-section">
        <div class="section-title">品牌分类</div>
        <el-input
          placeholder="请输入品牌分类名称"
          clearable
          class="category-search"
        />
        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </div>
    </div>

    <!-- 右侧品牌列表区 -->
    <div class="right-side">
      <div class="action-bar">
        <div class="action-buttons">
          <el-button type="primary">新增</el-button>
          <el-button>导入</el-button>
          <el-button>导出</el-button>
          <el-button>启用</el-button>
          <el-button>禁用</el-button>
          <el-button>删除</el-button>
        </div>
      </div>
      <div class="brand-table">
        <el-table 
          :data="[]" 
          style="width: 100%" 
          empty-text="暂无数据"
          @selection-change="handleSelectionChange"
        >
          <!-- 添加的多选框列 -->
          <el-table-column
            type="selection"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" width="120" align="center">
            <template #default>
              <el-button type="text" size="small">编辑</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="code" label="品牌编号" width="150"></el-table-column>
          <el-table-column prop="name" label="品牌名称"></el-table-column>
          <el-table-column prop="status" label="状态" width="100" align="center">
            <template #default>
              <el-switch
                active-value="enabled"
                inactive-value="disabled"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <span class="total">共0条</span>
        <el-pagination
          :current-page="1"
          :page-size="50"
          :total="0"
          layout="prev, pager, next"
        ></el-pagination>
        <span class="page-size">50条/页</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BrandManagement',
  data() {
    return {
      currentCategory: 'all',
      resizeObserver: null,
      data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        selectedBrands: [] // 新增的选中品牌数组
    }
  },
  mounted() {
    this.setupResizeObserver()
  },
  beforeUnmount() {
    if (this.resizeObserver) {
      this.resizeObserver.disconnect()
      this.resizeObserver = null
    }
  },
  methods: { 
    handleNodeClick(data) {
      console.log(data);
    },
    // 新增的选择变化处理方法
    handleSelectionChange(selection) {
      this.selectedBrands = selection
      console.log('选中的品牌:', this.selectedBrands)
    },
    setupResizeObserver() {
      const debounce = (fn, delay) => {
        let timer
        return function() {
          clearTimeout(timer)
          timer = setTimeout(() => fn.apply(this, arguments), delay)
        }
      }

      this.resizeObserver = new ResizeObserver(debounce((entries) => {
        for (const entry of entries) {
          console.log('Element resized:', entry.target)
        }
      }, 100))

      const tableElement = document.querySelector('.brand-table')
      if (tableElement) {
        this.resizeObserver.observe(tableElement)
      }
    }
  }
}
</script>

<style scoped>
/* 原有样式保持不变 */
.brand-management {
  display: flex;
  height: 100vh;
  background-color: #fff;
  padding: 20px;
  overflow: hidden;
}

.left-side {
  width: 250px;
  padding-right: 20px;
  border-right: 1px solid #e6e6e6;
  overflow-y: auto;
}

.right-side {
  flex: 1;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.search-box {
  margin-bottom: 20px;
}

.category-section {
  margin-top: 20px;
}

.section-title {
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.category-search {
  margin-bottom: 10px;
}

.category-list {
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  padding: 5px 0;
}

.category-item {
  padding: 8px 15px;
  cursor: pointer;
}

.category-item:hover {
  background-color: #f5f7fa;
}

.category-item.active {
  background-color: #ecf5ff;
  color: #409eff;
}

.action-bar {
  margin-bottom: 20px;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.brand-table {
  flex: 1;
  overflow: auto;
  min-height: 200px;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 20px;
  flex-shrink: 0;
}

.total {
  margin-right: 20px;
  font-size: 14px;
  color: #606266;
}

.page-size {
  margin-left: 20px;
  font-size: 14px;
  color: #606266;
}

.el-table {
  border: 1px solid #e6e6e6;
}

.el-table::before {
  height: 0;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #a8a8a8;
}
</style>